<template>
  <div>
    <el-row>
      <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="20"
        ><div class="grid-content bg-purple-light">
			<el-divider></el-divider>
        		<div style="text-align:center;">
                  <h1>{{ title }}</h1>
                </div>
		  <el-divider></el-divider>
<!-- :toolbarsFlag=false  :subfield=false defaultOpen="preview" -->
          <div class="mavonEditor">
            <!-- <no-ssr> -->
              <mavon-editor 
			  
			  :toolbarsFlag=false  :subfield=false defaultOpen="preview"
			   :toolbars="markdownOption" v-model="handbook" />
            <!-- </no-ssr> -->
          </div>
		  <div style="text-align:left;">
			  <el-link :underline="false" class="commenticon" @click="OnCollect()" :style="isCollect?'color:#409EFF;':''">
				  收藏 <i v-if="!isCollect" class="el-icon-star-off"></i>
				  	   <i v-if="isCollect" class="el-icon-star-on"></i>
			  </el-link> 
			  <el-link :underline="false" class="commenticon" @click="OnLike()" :style="isLike?'color:#409EFF;':''">
				  点赞 <i class="el-icon-thumb"></i>{{blog.likenum==0?'':blog.likenum}}
			  </el-link> 
			  <el-link :underline="false" class="commenticon">
				  分享 <i class="el-icon-share"></i>
			  </el-link> 
		  </div>
			<el-divider></el-divider>

<!-- 评论 -->
			<div >
				<el-form ref="form" label-width="80px">
					<!-- <div style="background-color: #f5eadd;margin-bottom: 10px;border-radius: 4px;">
						评论：
					</div> -->
					<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}"	
       					placeholder="请输入内容" v-model="comment" style="margin-bottom: 10px;"></el-input>
					<el-form-item style="text-align:right;">
						<el-button size="mini" type="primary" @click="onSubmit(-1)">发表评论</el-button>
					</el-form-item>
				</el-form>
			</div>

 		<div v-if="user == ''" style="text-align: center;">
			<el-link href="/main/login" type="primary">查看评论，请登录</el-link>
		</div>
<!-- 所有评论 -->
			<div v-if="user != ''">
				<div style="background-color: #f5eadd;margin-bottom: 10px;border-radius: 4px;">
					所有评论：
				</div>
				<div class="allcomment" v-for="(data,index) in comments">
					<!-- 评论人 -->
					<div style="margin: 10px;">    
						<span>{{data.username}}:</span>
					</div>
					<!-- 评论内容 -->
					<div style="margin-left: 30px;">
						<h5>{{data.comment}}</h5>
					</div>
						<!-- 嵌套的回复 -->
						<div class="reply" v-for="(reply,index) in data.replies">
							<!-- 回复人 -->
							<div style="margin: 10px;font-size:smaller">
								<div>{{reply.formname}}:</div>
							</div>
							<!-- 回复内容 -->
							<div style="margin-left: 30px;">
								<div style="text-align：left;font-size: smaller;margin: 10px;">
									<h6 style="margin: 5px 0px;"><span style="color:#95c4fd;">回复 {{reply.toname}}: &nbsp;&nbsp;</span>{{reply.comment}}</h6>
								</div>
								
								<!-- <el-link  @click="replyAgain(index)" style="text-align：right;font-size: smaller;margin: 10px; width: 50px;">回复<i class="el-icon-s-comment"></i></el-link> -->
							</div>
							<!-- 日期 -->
							<div style="display: flex;justify-content: space-between;">
								<span style="text-align：left;font-size: smaller;margin: 10px;">{{reply.createTime|moment("YYYY年MM月DD日 HH:mm")}}</span>
								<el-link  @click="replyAgain(index)" style="text-align：right;font-size: smaller;margin: 10px;">回复<i class="el-icon-s-comment"></i></el-link>
							</div>
							<!-- 回复评论框 -->
							<div style="margin: 3px 10px;" v-if="isReplyAgain==index">
								<el-input type="text" size="mini" :autosize="{ minRows: 1, maxRows: 2}"	
									placeholder="请输入内容" v-model="replyAgaintext" style="margin-bottom: 10px;">
									<el-button style="color:#95c4fd;" slot="append" size="mini" type="primary" @click="OnReplyAgain(index,reply)">确认</el-button>
								</el-input>
							</div>
						</div>
					<!-- 评论日期 -->
					<div style="display: flex;justify-content: space-between;">
						<span style="text-align：left;font-size: smaller;margin: 10px;">{{data.createTime|moment("YYYY年MM月DD日 HH:mm")}}</span>
						<el-link  @click="reply(index)" style="text-align：right;font-size: smaller;margin: 10px;">回复<i class="el-icon-s-comment"></i></el-link>
					</div>
					<!-- 回复评论框 -->
					<div style="margin: 10px;" v-if="isReply==index">
						<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 2}"	
							placeholder="请输入内容" v-model="replytext" style="margin-bottom: 10px;"></el-input>
						<div style="text-align:right;">
							<el-button size="mini" type="primary" @click="onSubmit(index,data)">回复</el-button>
						</div>
					</div>
					
				</div>
			</div>
			<el-divider></el-divider>
		  </div
      ></el-col>
      <el-col :span="2"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
    </el-row>
	<el-backtop></el-backtop>
  </div>
</template>
<script>
export default {
  name: "Detail",
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
	 // handbook: this.$route.params.id,
      handbook: "#### how to use mavonEditor in nuxt.js",
      title: "",
	  blog: [],
	  comment: '',
	  user: '',
	  comments: [],
	  isReply: -1,
	  isLike: false,
	  isCollect: false,
	  isReplyAgain: -1,
	  replytext: '',
	  replyAgaintext: '',
    };
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
	this.user = sessionStorage.getItem("loginUser");
    this.fetchData();
	
  },
  mounted() {
	//   window.addEventListener('beforeunload', e => this.distroy(e))
  },
  destroyed() {
	  window.removeEventListener('beforeunload', e => this.distroy(e))
  },
  methods: {
	  fetchData () {
      // replace getPost with your data fetching util / API wrapper
	//   console.log('获取数据');
    //   console.log(this.$root.detailBlog);
	  if(this.$route.params.id){
		// this.$root.detailBlog = this.$route.params.id;
		this.blog=this.$route.params.id;
		// console.log("有参数");
		sessionStorage.setItem("detailBlog",JSON.stringify(this.blog));
	  }else{
		  this.blog = JSON.parse(sessionStorage.getItem("detailBlog"));
	  }
	//   console.log(this.$root.detailBlog);
	  this.handbook=this.blog.context;
	  this.title = this.blog.title;
	  // 发送请求查看评论
	  if(this.user != ''){
		  this.axios.post(`http://120.77.213.195:8001/comment/queryByblogId?id=${this.blog.id}`).then((response)=>{
			//   console.log("查看评论");
			//   console.log(response);
			  this.comments = response.data.comments;
			  if(response.data.code != 0){
				sessionStorage.setItem("loginUser",'');
				this.user = '';
			  }
		  });	
	  }
    },
	// 回复评论和评论微博处理
	onSubmit(index,data){
		console.log(data);
		if(index == -1){
			// this.$message('发表评论');
			var commentData = {
				comment: this.comment,
				username: this.user,
				blogid: this.blog.id,
			}
			if(this.user != '' && this.comment != ''){
				this.axios.post(`http://120.77.213.195:8001/comment/save`,commentData).then((response) => {
					// console.log("响应：")
					// console.log(response);
					if(response.data.code ==0){
						this.$message('评论成功');
						window.location.reload();
					}
				});
			}else if(this.user == ''){
				this.$message.error('请登录，再评论');
			}else if(this.comment == ''){
				this.$message('消息不能为空');
			}
		}else{
			this.$message('回复评论');
			var replyData = {
				formname: this.user,
				toname: data.username,
				blogId: this.blog.id,
				comment: this.replytext,
				commentId: data.id,
			}
			if(this.user != '' && this.replytext != ''){
				this.axios.post(`http://120.77.213.195:8001/comment/reply`,replyData).then((response) => {
					// console.log("响应：")
					// console.log(response);
					if(response.data.code ==0){
						this.$message('评论成功');
						window.location.reload();
					}
				});
			}else if(this.replytext == ''){
				this.$message('消息不能为空');
			}
		}
		
	},
	reply(index){
		// this.$message(this.index);
		this.isReply=index;
		// console.log(index)
	},
	replyAgain(index){
		this.isReplyAgain=index;
	},
	// 嵌套回复处理
	OnReplyAgain(index,reply){
		// console.log(reply);
		var replyAgainData = {
				formname: this.user,
				toname: reply.formname,
				blogId: this.blog.id,
				comment: this.replyAgaintext,
				commentId: reply.commentId,
			}
			if(this.user != '' && this.replyAgaintext != ''){
				this.axios.post(`http://120.77.213.195:8001/comment/reply`,replyAgainData).then((response) => {
					// console.log("响应：")
					// console.log(response);
					if(response.data.code ==0){
						this.$message('评论成功');
						window.location.reload();
					}
				});
			}else if(this.replyAgaintext == ''){
				this.$message('消息不能为空');
			}
	},
	// 点赞处理
	OnLike(){
		console.log(this.blog);
		if(this.user != ''){
			this.isLike = !this.isLike;
			if(this.isLike){
				this.blog.likenum++;
			}else{
				this.blog.likenum--;
			}
			this.axios.post(`http://120.77.213.195:8001/blog/like`,this.blog).then((res)=>{
				console.log(res);
			});
		}else{
			this.$message.error("未登录状态，请先登录");
		}
	},
	OnCollect(){
		if(this.user != ''){
			this.isCollect = !this.isCollect;
		}else{
			this.$message.error("未登录状态，请先登录");
		}
	},


	  
  },	
};
</script>

<style scoped>
.mavonEditor {
  width: 100%;
  height: 100%;
}
.commenticon{
	font-size:15px;
	/* width: 30px; */
	text-align: left;
	border:3px solid rgb(247, 243, 243);
	margin-right: 3px;
}
	
.allcomment{
	border:1px solid rgb(192, 192, 192);
	border-radius: 8px;
	margin: 10px;
}
.reply{
	background-color: #fdfdfd;
	color: #333;
	padding: 0px;
	box-shadow: 0 0 30px #ccccca;

	border:1px solid rgb(243, 242, 242);
	border-radius: 8px;
	margin: 10px 30px;
}


/* 布局 */
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
	
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>